<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!--<meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>-->
  <meta name="keywords" content="JRoll, 醉箩卜">
  <meta name="description" content="JRoll，一款能滚起上万条数据，具有滑动加速、回弹、缩放、滚动条、滑动事件等功能，兼容CommonJS/AMD/CMD模块规范，开源，免费，兼有与IScroll几乎一致API的超轻量级html5滚动插件。">
  <title>JRoll 醉箩卜</title>
  <link href="http://www.chjtx.com/JRoll/favicon.ico" type="image/x-icon" rel="icon">
  <link rel="stylesheet" href="./css/index.css">
  <script>
  (function () {
    var u = /MSIE (\d)/.exec(navigator.userAgent);
    if (u) {
      //IE9以下浏览器禁止访问
      if (u[1]*1 < 9) {
        location.href = "sorry.html";
      }
    }
  })();
  </script>
  <script src="./js/jfram.js"></script>
</head>
<body>
  <div id="wrap">
    <div id="left">
      <div id="logo"></div>
      <ul id="menu">
        <li><a target="_blank" href="http://www.chjtx.com/JRoll/">JRoll2</a></li>
        <li><a id="a_start" href="#todo/go?do=start">开始</a></li>
        <li><a id="a_use" href="#todo/go?do=use">用法</a></li>
        <li><a id="a_demo" href="#todo/go?do=demo">示例</a></li>
        <li><a id="a_download" href="#todo/go?do=download">下载</a></li>
        <li><a id="a_plgin" href="#todo/go?do=plgin">插件</a></li>
        <li><a target="_blank" href="https://git.oschina.net/chenjianlong/JRoll">git托管</a></li>
      </ul>
    </div>
    <div id="right">
		<div id="wmd-preview" class="wmd-preview">
			<blockquote data-anchor-id="04mn" class="white-blockquote">
				<p>JRoll，一款能滚起上万条数据，具有滑动加速、回弹、缩放、滚动条、滑动事件等功能，兼容CommonJS/AMD/CMD模块规范，开源，免费，兼有与IScroll几乎一致用法的超轻量级html5滚动插件。国产原装正品，所以必须有个中文名——醉萝卜，本屌想了三天三夜才想出这个名字的！<img style="vertical-align: middle;" src="./images/bqfh15.png"></p>
			</blockquote>
			<div class="md-section-divider"></div>
			<h3 data-anchor-id="cikv" id="兼容性">兼容性</h3>
			<p data-anchor-id="dqa8">本插件专为移动应用度身设计，目前仅兼容android和ios，已测试通过的手机系统有：android4.1/4.2/4.3/4.4/5.0和ios6/7/8。
				<br> 为使本插件最轻量化，不会对PC浏览器进行过多的兼容，因此强烈建议使用谷歌浏览器进行开发。
			</p>
			<div class="md-section-divider"></div>
			<h3 data-anchor-id="qms6" id="引入">引入</h3>
			<ul data-anchor-id="8f01">
				<li>普通方式引入</li>
			</ul>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="4vvc"><ol class="linenums"><li class="L0"><code class="language-html"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">'./js/jroll.js'</span><span class="tag">&gt;&lt;/script&gt;</span></code></li></ol></pre>
			<ul data-anchor-id="u8r1">
				<li>CommonJS规范引入</li>
			</ul>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="roo4"><ol class="linenums"><li class="L0"><code class="language-javascript"><span class="kwd">var</span><span class="pln"> JRoll </span><span class="pun">=</span><span class="pln"> require</span><span class="pun">(</span><span class="str">'./js/jroll.js'</span><span class="pun">);</span></code></li></ol></pre>
			<ul data-anchor-id="x6jj">
				<li>AMD规范引入（requireJS）</li>
			</ul>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="jzap"><ol class="linenums"><li class="L0"><code class="language-javascript"><span class="pln">require</span><span class="pun">([</span><span class="str">'./js/jroll.js'</span><span class="pun">],</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="typ">JRoll</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code class="language-javascript"><span class="pln">    </span><span class="pun">...</span></code></li><li class="L2"><code class="language-javascript"><span class="pun">});</span></code></li></ol></pre>
			<ul data-anchor-id="ka3j">
				<li>CMD规范引入（seaJS）</li>
			</ul>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="p2mz"><ol class="linenums"><li class="L0"><code class="language-javascript"><span class="pln">seajs</span><span class="pun">.</span><span class="pln">use</span><span class="pun">(</span><span class="str">'./js/jroll.js'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="typ">JRoll</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code class="language-javascript"><span class="pln">    </span><span class="pun">...</span></code></li><li class="L2"><code class="language-javascript"><span class="pun">});</span></code></li></ol></pre>

			<div class="md-section-divider"></div>
			<h3 data-anchor-id="5cbm" id="简单例子">简单例子</h3>
			<p data-anchor-id="v8og">html代码</p>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="o9ot"><ol class="linenums"><li class="L0"><code class="language-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"wrapper"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="language-html"><span class="pln">    </span><span class="tag">&lt;ul&gt;</span></code></li><li class="L2"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">万里长城</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L3"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">桂林山水</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L4"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">北京故宫</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L5"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">杭州西湖</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L6"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">苏州园林</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L7"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">安徽黄山</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L8"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">长江三峡</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L9"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">台湾日月潭</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L0"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">承德避暑山庄</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L1"><code class="language-html"><span class="pln">        </span><span class="tag">&lt;li&gt;</span><span class="pln">西安秦陵兵马俑</span><span class="tag">&lt;/li&gt;</span></code></li><li class="L2"><code class="language-html"><span class="pln">    </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L3"><code class="language-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre>
			<p data-anchor-id="zzjh">css代码</p>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="4a1t"><ol class="linenums"><li class="L0"><code><span class="pln">ul </span><span class="pun">{</span><span class="pln">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;}</span></code></li><li class="L1"><code><span class="pln">li </span><span class="pun">{</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">24px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">24px</span><span class="pun">;}</span></code></li><li class="L2"><code><span class="pln">#wrapper </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid</span><span class="pun">;</span></code></li><li class="L3"><code><span class="pun">}</span></code></li></ol></pre>
			<p data-anchor-id="6rlc">js代码</p>
			<div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="r2m9"><ol class="linenums"><li class="L0"><code><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li></ol></pre>
			<p data-anchor-id="qy10">对上面简单例子分析，要使JRoll滚起来需要注意以下几点
				<br> 1. wrapper的高度需要小于ul高度
				<br> 2. JRoll虽然可以滚起上万条数据，但仅限于普通标签节点和文本节点，如果图片过多或过大，都会占用过多内存而导致卡顿。
				<br> 3. wrapper的padding不为0或ul的margin不为0都有可能导致计算错误，ul内容显示不全</p>
		</div>
    </div>
  </div>
  <script>
  if (location.hash === "") {
    location.hash = "todo/go?do=start";
  }
  </script>
</body>
</html>